<template>
  <div class="duty-record-wrap">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="isMuilUnitUser === 1">
        <el-select filterable v-model="searchForm.orgIds" placeholder="请选择业主单位">
          <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="值班开始日期"
          end-placeholder="值班结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="utils.intTimePickerOptions()"
          @change="getTable(1)">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="biaozhi">
        <el-select filterable @change="getTable(1)" v-model="searchForm.watchClassId" placeholder="请选择班次">
          <el-option label="全部班次" value="-1"></el-option>
          <el-option
            v-for="item in classesOptions"
            :key="item.id"
            :label="item.orderName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select filterable clearable @change="getTable(1)" v-model="searchForm.onDutyAccount" placeholder="请选择值班人员">
          <el-option label="全部值班人员" value=""></el-option>
          <el-option
            v-for="item in personnelOptions"
            :key="item.accountName"
            :label="item.name"
            :value="item.accountName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getTable(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="overclick-wrap" :gutter="40">
      <el-col :span="8">
        <div class="item-wrap" @click="searchForm.dutyResult=-1" :class="searchForm.dutyResult==-1 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-4">{{ statistics.total }}</p>
            <p class="item-title">值班总次数</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap" @click="searchForm.dutyResult=1" :class="searchForm.dutyResult==1 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-3">{{ statistics.normal }}</p>
            <p class="item-title">正常值班</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="item-wrap" @click="searchForm.dutyResult=0" :class="searchForm.dutyResult==0 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-2">{{ statistics.abnormal }}</p>
            <p class="item-title">异常值班</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      ref="dutyRecordTableList"
      :data="tableData"
      style="width: 100%">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column v-if="isMuilUnitUser === 1" prop="orgName" width="200" label="业主单位"></el-table-column>
      <el-table-column label="日期" prop="watchDate" width="150" :formatter="formatWatchDate"></el-table-column>
      <el-table-column label="班次" prop="className"></el-table-column>
      <el-table-column label="值班人员" prop="onDutyAccountName"></el-table-column>
      <el-table-column label="上班" align="center">
        <el-table-column
          prop="watchStartTime"
          label="排班时间"
          :formatter="formatDateTime"
          width="200">
          <!-- <template slot-scope="scope">{{scope.row.watchStartTime ? formatDateTime(scope.row.watchStartTime) : "-"}}</template> -->
        </el-table-column>
        <el-table-column
          prop="ondutyTime"
          label="打卡时间"
          :formatter="formatDateTime"
          width="200">
        </el-table-column>
        <el-table-column
          label="结果"
          width="200">
          <template slot-scope="scope">
            <p class="color-2" v-if="scope.row.ondutyResult == 0">未打卡</p>
            <p class="color-3" v-else-if="scope.row.ondutyResult == 1">正常</p>
            <p class="color-1" v-else-if="scope.row.ondutyResult == 2">迟到</p>
            <p class="color-1" v-else-if="scope.row.ondutyResult == 3">早退</p>
            <p v-else></p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="下班" align="center">
        <el-table-column
          prop="watchEndTime"
          label="排班时间"
          :formatter="formatDateTime"
          width="200">
        </el-table-column>
        <el-table-column
          prop="offdutyTime"
          label="打卡时间"
          :formatter="formatDateTime"
          width="200">
        </el-table-column>
        <el-table-column
          label="结果"
          width="200">
          <template slot-scope="scope">
            <p class="color-2" v-if="scope.row.offdutyResult == 0">未打卡</p>
            <p class="color-3" v-else-if="scope.row.offdutyResult == 1">正常</p>
            <p class="color-1" v-else-if="scope.row.offdutyResult == 2">迟到</p>
            <p class="color-1" v-else-if="scope.row.offdutyResult == 3">早退</p>
            <p v-else>-</p>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="整体结果" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.dutyResult == 1" class="type-tags type-color-3">正常</div>
          <div v-else class="type-tags type-color-2">异常</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
      </el-pagination>
  </div>
</template>

<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import {getUsers} from '@/api/api'
import * as Dao from '@/api/watch'

export default {
  name: 'DutyRecord',
  props:['param'],
  data () {
    return {
      loading: false,
      utils: utils,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      orgOptions: [], // 业主单位下拉框数据
      classesOptions: [], // 班次下拉框数据
      personnelOptions: [], // 值班人员下拉框数据
      biaozhi:false,
      searchForm: {
        orgIds: '', // 业主单位
        time: '', // 时间
        onDutyAccount: '', // 值班人
        watchClassId: '-1', // 班次
        dutyResult: '-1' // 结果
      },
      // 统计
      statistics: {
        total: 0,
        normal: 0,
        abnormal: 0
      },
      // 列表
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created:function() {
    let that = this
    // 绑定下拉框
    if(this.isMuilUnitUser === 1) {
      getOrgList({queryType: 0}).then(res => {
        that.orgOptions = res.data
        //that.searchForm.orgIds = that.orgOptions[0].organizationId
      })
      that.searchForm.orgIds = that.$store.state.userinfo.organizationIds
    }
    // 获取班次
    // 获取用户列表
    that.getPersonnelOptions()
    that.getTable()
  },
  methods: {
    // 获取班次下拉框数据
    getClassesOptions() {
      let that = this
      let parames = {
        organizationId: this.searchForm.orgIds,
        sort: 'orderTimes',
        order: 'asc',
        offset: 0,
        limit: 20,
      }
      Dao.getClasses(parames).then(res => {
        that.classesOptions = res.data
      })
    },
    // 获取值班人员下拉框数据
    getPersonnelOptions() {
      let that = this
      getUsers({
        orgIds: this.searchForm.orgIds,
        queryType: 0
      }).then(res => {
        that.personnelOptions = res.data
      })
    },
    // 获取统计
    getStatic() {
      let that = this
      let parames = {
        orgIds: that.searchForm.orgIds || this.$store.state.userinfo.organizationIds, // 联网单位编码
        startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '',
        endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
        watchClassId: that.searchForm.watchClassId || '',
        onDutyAccount: that.searchForm.onDutyAccount || '',
        dutyResult: '-1'
      }
      Dao.getOndutyCount(parames).then(res => {
        that.statistics = res.data
      })
    },
    // 获取列表数据
    getTable (pageIndex, pageSize, isStatus) {
      let that = this
      that.loading = true
      if (pageIndex) {
        that.currentPage = pageIndex
      }
      if (pageSize) {
        that.pageSize = pageSize
      }
      let parames = {
        orgIds: that.searchForm.orgIds || this.$store.state.userinfo.organizationIds,
        startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00'  : '',
        endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59'  : '',
        watchClassId: that.searchForm.watchClassId || '',
        onDutyAccount: that.searchForm.onDutyAccount || '',
        dutyResult: that.searchForm.dutyResult,
        queryType: 1,
        pageSize: that.pageSize,
        pageIndex: that.currentPage - 1
      }
      Dao.getOndutyRecords(parames).then(res => {
        that.tableData = res.data
        that.total = res.total
        that.loading = false
      })
      // 不是改变状态，重新获取统计信息
      if (!isStatus) {
        that.getStatic()
      }
    },
    handleSizeChange(pageSize) {
      this.getTable(1, pageSize, true)
    },
    handleCurrentChange(currentPage) {
      this.getTable(currentPage, this.pageSize, true)
    },
    formatDateTime: function(row, column, cellValue, index) {
      let endStr = ''
      if(cellValue) {
        // 判断是否跨天
        if (Number(row.watchStartTime.slice(0, 10).split('-').join('')) < Number(cellValue.slice(0, 10).split('-').join(''))) {
          endStr = '（次日）'
        }
        return utils.ilinkTimeformat.format(new Date(cellValue), 'hh:mm') + endStr
      }else {
        return '-'
      }
    },
    formatWatchDate: function(row, column, cellValue, index) {
      if(cellValue) {
        let date = String(cellValue)
        return date.slice(0, 4) + '-' + date.slice(4, 6) + '-' + date.slice(6, 9)
      }else {
        return '-'
      }
    },
  },
  watch: {
    currentStatus(val, oldVal) {
        if(val !== oldVal) {
          this.getTable(1, false, true)
        }
    },
    currentOrgIds(val, oldVal) {
      if(val !== oldVal) {
        this.searchForm.watchClassId = '-1'
        // 获取用户列表
        this.getPersonnelOptions()
        this.searchForm.onDutyAccount = ''
        this.getTable(1)
        if(String(val).indexOf(",")==-1){
          this.biaozhi=true
          // 获取班次
          this.getClassesOptions()
        }else{
          this.biaozhi=false
        }
      }
    }
  },
  computed: {
    currentStatus() {
      return this.searchForm.dutyResult
    },
    currentOrgIds() {
      return this.searchForm.orgIds
    }
  }
}
</script>